<template>
    <div class="box">
      <el-card class="main-card" shadow="always" >
        <div class="cardTitle">{{ this.$route.meta.title }}</div>
        <div class="operation-container">
          <el-input
            type="textarea"
            placeholder="说点什么吧"
            v-model="talk.content"
            rows="10"
            show-word-limit
          >
          </el-input>
        </div>
        <div class="operation-wrapper">
          <div class="left-wrapper">
<!--            上传文件使用-->
            <el-upload
              :action="this.baseUrl+'/admin/talks/images'"
              multiple
              :headers="headers"
              :before-upload="beforeUpload"
              :on-success="upload"
              :show-file-list="false">
              <i class="iconfont el-icon-mytupian operation-btn tupian" />
            </el-upload>
          </div>
          <div class="right-wrapper">
            <el-switch
              style="margin-right: 16px"
              v-model="talk.isTop"
              inactive-text="置顶"
              :active-value="1"
              :inactive-value="0" />
            <el-dropdown trigger="click" @command="handleCommand" style="margin-right: 16px">
              <span class="talk-status"> {{ dropdownTitle }}<i class="el-icon-arrow-down el-icon--right" /> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) of statuses" :key="index" :command="item.status">
                  {{ item.desc }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" size="small" @click="saveOrUpdateTalk" :disabled="talk.content == ''">
              发布
            </el-button>
          </div>
        </div>
<!--预览图使用  :action="this.baseUrl+'/admin/talks/images'"-->
        <el-upload
          class="talk-image-upload"
          v-show="uploads.length > 0"
          list-type="picture-card"
          :action="this.baseUrl+'/admin/talks/images'"
          multiple
          :headers="headers"
          :file-list="uploads"
          :before-upload="beforeUpload"
          :on-success="upload"
          :on-remove="handleRemove">
          <i class="el-icon-plus" />
        </el-upload>

      </el-card>
    </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import request from "@/utils/request";
import * as imageConversion from 'image-conversion'
export default {
  created() {
   let talkId= this.$route.query.talkId;
    if (talkId) {
      request.get('/admin/talks/' + talkId).then(data => {
        this.talk = data.data
        if (data.data.imgs) {
          data.data.imgs.forEach((item) => {
            this.uploads.push({ url: item })
          })
        }
      })
    }
  },
  data: function () {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      talk: {
        id: null,
        content: '',
        isTop: 0,
        status: 1,
        images: ''
      },
      statuses: [
        { status: 1, desc: '公开' },
        { status: 2, desc: '私密' }
      ],
      uploads: [],
      headers: { Authorization: 'Bearer ' + getToken() }
    }
  },
  methods: {
    handleCommand(command) {
      this.talk.status = command
    },
    handleRemove(file) {
      this.uploads.forEach((item, index) => {
        if (item.url == file.url) {
          this.uploads.splice(index, 1)
          //删除照片
          this.delImages(file)
        }
      })
    },

    delImages(file){
      console.log(file)
      request({
        url: '/admin/talks/delImages',
        method: 'post',
        params: {fileName: file.url}
      })
    },
    upload(response) {
      this.uploads.push({ url: response.data })
    },
    beforeUpload(file) {
      return new Promise((resolve) => {
        if (file.size / 1024 < this.config.UPLOAD_SIZE) {
          resolve(file)
        }
        imageConversion.compressAccurately(file, this.config.UPLOAD_SIZE).then((res) => {
          resolve(res)
        })
      })
    },
    saveOrUpdateTalk() {
      if (this.talk.content.trim() == '') {
        this.$message.error('说说内容不能为空')
        return false
      }
      if (this.uploads.length > 0) {
        var img = []
        this.uploads.forEach((item) => {
          img.push(item.url)
        })
        this.talk.images = JSON.stringify(img)
      } else {
        this.talk.images = ''
      }
     request.post('/admin/talks', this.talk).then(data => {
        if (data.flag) {
          this.$refs.editor.clear()
          this.uploads = []
          this.$router.push({ path: '/talk-list' })
          this.$notify.success({
            title: '成功',
            message: data.message
          })
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
      })
    }
  },
  computed: {
    dropdownTitle() {
      var desc = ''
      this.statuses.forEach((item) => {
        if (item.status == this.talk.status) {
          desc = item.desc
        }
      })
      return desc
    }
  }
}
</script>
<style>
.box{
  background-color: #F7F9FB;
  padding: 20px;
}
.el-textarea__inner{
  background-color: #F0F1F4;
  border: 0px;
  border-radius: 10px;
}
.operation-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.operation-btn {
  cursor: pointer;
  color: #838383;
  font-size: 20px;
  margin-right: 12px;
}
.talk-status {
  cursor: pointer;
  font-size: 12px;
  color: #999;
}
.emoji {
  user-select: none;
  margin: 0.25rem;
  display: inline-block;
  vertical-align: middle;
}
.emoji-item {
  cursor: pointer;
  display: inline-block;
}
.emoji-item:hover {
  transition: all 0.2s;
  border-radius: 0.25rem;
  background: #dddddd;
}
.left-wrapper {
  display: flex;
  width: 50%;
}
.talk-image-upload {
  margin-top: 8px;
}
</style>
